<template>
  <div class="project-cards">
    <div class="list-wrapper">
      <div class="list-item" v-for="(items, index) in list" :key="index">
        <div class="initials-title" :id="items[0].href">
          <div class="text">{{ items[0].href.toUpperCase() }}</div>
          <div class="num">{{ items.length }}</div>
        </div>
        <div class="service-list">
          <service-card
            v-for="item in items"
            :key="index + item.name"
            @touchend.stop="$router.push('/mobile/device-info')"
            :icon="item.icon"
            :name="item.name"
            :org="item.org"
          >
          </service-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import ServiceCard from '@/components/service-card/ServiceCard.vue'

const list = reactive([
  [
    {
      href: 'a',
      name: '热解有机碳',
      org: '北京石油地质实验研究中心',
      icon: 'oil_barrel',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'a',
      name: '总有机碳',
      org: '北京石油地质实验研究中心',
      icon: 'water_drop',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'a',
      name: '总有机碳、硫',
      org: '北京石油地质实验研究中心',
      icon: 'water_drop',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'a',
      name: '热解',
      org: '北京石油地质实验研究中心',
      icon: 'air',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'a',
      name: '激光原位Sr同位素',
      org: '北京石油地质实验研究中心',
      icon: 'oil_barrel',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
  ],
  [
    {
      href: 'b',
      name: '热解有机碳',
      org: '北京石油地质实验研究中心',
      icon: 'oil_barrel',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'b',
      name: '总有机碳',
      org: '北京石油地质实验研究中心',
      icon: 'water_drop',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'b',
      name: '总有机碳、硫',
      org: '北京石油地质实验研究中心',
      icon: 'water_drop',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'b',
      name: '热解',
      org: '北京石油地质实验研究中心',
      icon: 'air',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'b',
      name: '激光原位Sr同位素',
      org: '北京石油地质实验研究中心',
      icon: 'oil_barrel',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
  ],
  [
    {
      href: 'c',
      name: '热解有机碳',
      org: '北京石油地质实验研究中心',
      icon: 'oil_barrel',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'c',
      name: '总有机碳',
      org: '北京石油地质实验研究中心',
      icon: 'water_drop',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'c',
      name: '总有机碳、硫',
      org: '北京石油地质实验研究中心',
      icon: 'water_drop',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'c',
      name: '热解',
      org: '北京石油地质实验研究中心',
      icon: 'air',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'c',
      name: '激光原位Sr同位素',
      org: '北京石油地质实验研究中心',
      icon: 'oil_barrel',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
  ],
  [
    {
      href: 'd',
      name: '热解有机碳',
      org: '北京石油地质实验研究中心',
      icon: 'oil_barrel',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'd',
      name: '总有机碳',
      org: '北京石油地质实验研究中心',
      icon: 'water_drop',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'd',
      name: '总有机碳、硫',
      org: '北京石油地质实验研究中心',
      icon: 'water_drop',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'd',
      name: '热解',
      org: '北京石油地质实验研究中心',
      icon: 'air',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
    {
      href: 'd',
      name: '激光原位Sr同位素',
      org: '北京石油地质实验研究中心',
      icon: 'oil_barrel',
      content: '检测岩石样品中总有机质的百分比含量',
      checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
      dropdownOpen: false,
    },
  ],
])
</script>

<style scoped lang="scss">
.project-cards {
  position: relative;
  padding: 0 dpi(4rem);
  .list-wrapper {
    position: relative;
    flex: 1;
    .list-item {
      margin: 20px 0;

      .initials-title {
        font-family: Helvetica-Bold;
        font-size: dpi(2rem);
        letter-spacing: 0px;
        color: #b3b3b3;

        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        height: 30px;
        &::after {
          height: 1px;
          width: calc(100% - 36px);
          position: absolute;
          top: 14.5px;
          left: 18px;
          content: ' ';
          background: #eeeeee;
        }
        .text {
          font-size: dpi(2rem);
          color: #b3b3b3;
        }
        .num {
        }
      }

      .service-list {
        display: flex;
        row-gap: dpi(1rem);
        flex-wrap: wrap;
        margin-top: 10px;
      }
    }
  }
}
</style>
